<template>
  <div class="footer">
    <hr>
     <div class="footer-nav">
     <router-link :to="i!=4?link[i]:uname?'/home/personage':link[i]" v-for="(p,i) in list" :key="i">
       <i :class="i==index?'active':' '"></i>
       <p>{{p}}</p>
     </router-link>
    </div>
  </div>
</template>

<script>
export default {
  name:"footer-box",
  data() {
    return {
      list:["首页","合伙人专区","搜索","购物车","个人中心"],
      link:["/home/index","/home/partnerone","/home/herbal","/home/shoppingcart","/home/personalcenter"],
      index:0,
      uname:sessionStorage['username']
    };
  },
  created() {
    this.index=this.link.indexOf(this.$route.path)
  },
  methods:{

  }
};
</script>
<style scoped>
hr{
  margin:0;
}
a{
    text-decoration: none;
    color: #959595;
}
div.footer {
  background: #ffffff;
  bottom: 0;
  position: fixed;
  width: 100%;
}
div.footer-nav a i{
  background-repeat:no-repeat;
  margin-top:0px;
  margin-right:0px;
  margin-bottom:0px;
  margin-left:0px;
}
div.footer-nav a:first-child i{
  display: block;
  background-image:url("../../../public/img/footer/index.png");
  background-size: 25px 22px;
  width: 25px;
  height: 22px;
}
div.footer-nav a:first-child i.active{
  background-image: url("../../../public/img/footer/index-active.png");
}
div.footer-nav a p{
  margin-top: 2px;
  margin-bottom: 0px;
  font-size: 10px;
}
div.footer-nav a:nth-child(2) i{
  display: block;
  background-image:url("../../../public/img/footer/partner.png");
  background-size: 25px 22px;
  width:25px;
  height:22px;
  margin-left: 16px;
}
div.footer-nav a:nth-child(2) i.active{
  background-image: url("../../../public/img/footer/partner-active.png");
}
div.footer-nav a:nth-child(3) i{
  display: block;
  background-image:url("../../../public/img/footer/search.png");
  background-size: 25px 22px;
  width: 25px;
  height: 22px;
}
div.footer-nav a:nth-child(3) i.active{
  background-image: url("../../../public/img/footer/search-active.png");
}
div.footer-nav a:nth-child(4) i{
  display: block;
  background-image:url("../../../public/img/footer/shoppingcar.png");
  background-size: 25px 22px;
  width: 25px;
  height: 22px;
  margin-left: 5px;
}
div.footer-nav a:nth-child(4) i.active{
  background-image: url("../../../public/img/footer/shoppingcar-active.png");
}
div.footer-nav a:last-child i{
  display: block;
  background-image:url("../../../public/img/footer/personage.png");
  background-size: 25px 22px;
  width: 25px;
  height: 22px;
  margin-left: 11px;
}
div.footer-nav a:last-child i.active{
  background-image: url("../../../public/img/footer/personage-active.png");
}
div.footer-nav{
  display: flex;
  justify-content: space-around;
  text-align: center;
}
</style>